<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 176px;
        }
        
        .box div:nth-child(1) {
            position: absolute;
            bottom: 0;
            left: -154px;
            width: 154px;
            height: 121px;
            background: url(media/an2.png) no-repeat;
            -webkit-animation: move1 .4s steps(2) infinite, move 15s linear infinite;
            -moz-animation: move1 .4s steps(2) infinite, move 15s linear infinite;
            -ms-animation: move1 .4s steps(2) infinite, move 15s linear infinite;
            animation: move1 .4s steps(2) infinite, move 15s linear infinite;
        }
        
        @keyframes move1 {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -308px 0;
            }
        }
        
        .box div:nth-child(2) {
            position: absolute;
            bottom: 0;
            left: -167px;
            width: 167px;
            height: 176px;
            background: url(media/an3.png) no-repeat;
            -webkit-animation: move2 .4s steps(2) infinite, move 15s linear 2s infinite;
            -moz-animation: move2 .4s steps(2) infinite, move 15s linear 2s infinite;
            -ms-animation: move2 .4s steps(2) infinite, move 15s linear 2s infinite;
            animation: move2 .4s steps(2) infinite, move 15s linear 2s infinite;
        }
        
        @keyframes move2 {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -334px 0;
            }
        }
        
        .box div:nth-child(3) {
            position: absolute;
            bottom: 0;
            left: -161px;
            width: 161px;
            height: 149px;
            background: url(media/an4.png) no-repeat;
            -webkit-animation: move3 .4s steps(2) infinite, move 15s linear 4s infinite;
            -moz-animation: move3 .4s steps(2) infinite, move 15s linear 4s infinite;
            -ms-animation: move3 .4s steps(2) infinite, move 15s linear 4s infinite;
            animation: move3 .4s steps(2) infinite, move 15s linear 4s infinite;
        }
        
        @keyframes move3 {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -322px 0;
            }
        }
        
        .box div:nth-child(4) {
            position: absolute;
            bottom: 0;
            left: -171px;
            width: 171px;
            height: 157px;
            background: url(media/an1.png) no-repeat;
            -webkit-animation: move4 .4s steps(2) infinite, move 15s linear 6s infinite;
            -moz-animation: move4 .4s steps(2) infinite, move 15s linear 6s infinite;
            -ms-animation: move4 .4s steps(2) infinite, move 15s linear 6s infinite;
            animation: move4 .4s steps(2) infinite, move 15s linear 6s infinite;
        }
        
        @keyframes move4 {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -342px 0;
            }
        }
        
        @keyframes move {
            0% {}
            100% {
                transform: translateX(1920px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="div"></div>
        <div class="div"></div>
        <div class="div"></div>
        <div class="div"></div>
    </div>
</body>

</html>